<template>
  <div>
    <!-- 验证配置 -->
    <el-form-item label="校验规则">
      <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">添加规则</el-button>
    </el-form-item>
    <div v-for="(item, index) in regList" :key="index" class="Fg-reg-item">
      <span class="close-btn" @click="regList.splice(index, 1)">
        <i class="el-icon-close" />
      </span>
      <el-form-item label="表达式">
        <el-autocomplete
          class="Fg-reg-autocomplete"
          v-model="item.pattern"
          :fetch-suggestions="querySearch"
          placeholder="请输入正则，如：/^[0-9]*$/"
          @select="handleSelect"
        >
          <template slot-scope="{ item }">
            <div class="label">{{ item.label }}</div>
            <!-- <span class="value">{{ item.value }}</span> -->
          </template>
        </el-autocomplete>
        <!-- <el-input v-model="item.pattern" placeholder="请输入正则，如：/^[0-9]*$/"></el-input> -->
      </el-form-item>
      <el-form-item label="错误提示" style="margin-bottom: 0">
        <el-input v-model="item.message" placeholder="请输入错误提示" />
      </el-form-item>
    </div>
  </div>
</template>

<script>
import rules from "../utils/rules";
export default {
  name: "RegConfig",
  components: {},
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      rules,
    };
  },
  computed: {
    regList: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    addReg() {
      this.regList.push({
        pattern: "",
        message: "",
      });
    },
    querySearch(queryString, cb) {
      const results = queryString
        ? rules.filter(this.createFilter(queryString))
        : rules;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {},
  },
};
</script>

<style lang="scss" scoped>
.Fg-reg-autocomplete {
  width: 100%;
  // li {
  //   line-height: normal;
  //   padding: 7px;
  //   .label {
  //     text-overflow: ellipsis;
  //     overflow: hidden;
  //   }
  //   .value {
  //     font-size: 12px;
  //     color: #b4b4b4;
  //   }
  //   .highlighted .value {
  //     color: #ddd;
  //   }
  // }
}
</style>